CSS 基本使用

前言：自从第一次学习css至今已经过了很久了，因为不常用现在也忘记的差不多了，故重新开始记录css的笔记

基本选择器（重要）

标签选择器

h1{color:coral;}

类选择器

.app{color:coral;}

id选择器

#app{color:coral;}

层次选择器

后代选择器

例如 body后面所有的p标签（祖父爷父子全部包含）

<body>
  <p></p>
  <ul>
    <li>
      <p>这里的p也能选上</p>
    </li>
  </ul>
</body>

body p{
  ...
}

子选择器

与上的区别就是这个只有一代（子）

<body>
  <p></p>
  <ul>
    <li>
      <p>这里的p标签选不了</p>
    </li>
  </ul>
</body>

body>p{
  ...
}

相邻兄弟选择器

同一级下当前选中元素的向下第一个兄弟

<p class="active"></p>
<p></p>
<p>选不到</p>

.active + p{
  ...
}

通用兄弟选择器

同一级下当前选中元素的向下所有兄弟

<p class="active"></p>
<p></p>
<p>也能选到</p>

.active~p{
  ...
}

结构伪类选择器

<h1>h1</h1>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
</ul>

选择例子

选取ul的第一个子元素

ul li:first-child{
  ...
}

ul的最后一个子元素

ul li:last-child{
  ...
}

选中p1：定位到父元素
1. 第一种方法：选择父元素的第二个元素（注意：选中的元素得是 p 元素才行）
```
p:nth-child(2){
  ...
}
```
2. 第二种方法：选择父元素的第一个该类型元素
```
p:nth-of-type(1){
  ...
}      
```

属性选择器（重要）

正则： = 绝对等于 *= 包含 ^= 以什么开头 $= 以什么结尾

<a id="first" class="a1 a2 a3" href="http://www.baidu.com">

例1：选中带有id属性的a标签

a[id]{
  ...
}

例2：选中带有id属性为first的a标签 语法：属性名=属性值（正则）

a[id=first]{
  ...
}

例3：通过某个类来选中标签（多个类时需要使用*=）

a[class*="a1"]{
  ...
}

例4：选中href中以http开头的元素

a[href^="http"]{
  ...
}

字体样式

修改字体和大小

可以设置多个字体，例如这里中文用楷体，英文用 fantasy

body{
  font-family:  fantasy , 楷体;
  font-size: 20px;
}

修改字体粗细

具体粗细设置参考中文文档

body{
  font-weight: bold;
}

文本样式

颜色和对齐方式

颜色

16进制的颜色其实就是两位表示一个一个色之所以用16进制就是因为16*16 = 256 所以每两位就可以表示 0-255 这个范围

RGB 就是 #000000 ---> #FFFFFF

所以一般可以直接通过改 00 到 FF 之间的数值来修改颜色

例如 #FF0000 表示红色缩写 #F00 #00FF00 表示绿色缩写 #0F0 #0000FF 表示蓝色缩写 #00F

所以 #000000 表示黑色不过一般可以直接缩写成#000 同理 #FFFFFF 表示白色不过一般可以直接缩写成#FFF

也可以写成下面这种RGB的形式

h1{
  color: rgb(0,255,255)
}

或者RGBA 但是A是 0-1 这个范围的

h1{
  color: rgba(0,255,0,0.3);
}

对齐方式

参考w3school--text-align

值	描述
left	把文本排列到左边。默认值：由浏览器决定。
right	把文本排列到右边。
center	把文本排列到中间。
justify	实现两端对齐文本效果。
inherit	规定应该从父元素继承 text-align 属性的值。

h1{
  text-align: center
}

首行缩进行高

em 表示一个字

h1{
  text-indent: 2em;
  line-height: 2em;
}

装饰 decoration

去掉下划线（或者说是无装饰）

h1{
  text-decoration: none
}

下划线

h1{
  text-decoration: underline;
}

中划线

h1{
  text-decoration: line-through;
}

上划线

h1{
  text-decoration: overline;
}

超链接标签修改

/* 去掉下划线，以及设置颜色为黑色 */
a{
    text-decoration: none;
    color: #000;
}
/* 未访问过的链接颜色 */
a:link{
  color: #000
}

/* 鼠标悬浮在该标签时的颜色 */
a:hover{
    color: orange;
}

/* 鼠标按下没有松开时 */
a:active{
    color: greenyellow;
    font-size: 20px;
}

/* 访问过后的颜色 */
a:visited{
    color: brown;
}

文本阴影

如下所示： value为：X坐标 Y坐标模糊半径阴影颜色

p{
    text-shadow: 5px 10px 15px #000;
}

列表样式

<ul>
    <li>项目1</li>
    <li>项目2</li>
    <li>项目3</li>
</ul>

ul li{
    list-style: none;
}

名称	效果
none	关闭效果
circle	空心圆
square	方形
upper-roman	罗马数字
lower-alpha	小写字母
decimal	数字

更多的样式参考

背景图片及渐变

颜色渐变

CSS3 定义了两种类型的渐变（gradients）：

线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向 径向渐变（Radial Gradients）- 由它们的中心定义

<div id="img"></div>

线性渐变

语法图片来自菜鸟教程

a{
  background-image: linear-gradient(角度, 颜色节点, ... , 颜色节点);
}

角度是指水平线和渐变线之间的角度，逆时针方向计算。换句话说，0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。

#img{
    width: 500px;
    height: 500px;
    border: 2px solid red;
    background-image: linear-gradient(40deg, #1b0c58, #632a6a, #a34e7b, #e3748c);
    
}

径向渐变

可以指定渐变的中心、形状（圆形或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。

语法

a{
  background-image: radial-gradient(形状 大小 位置, 开始颜色, ..., 结束颜色);
}

#img{
    width: 500px;
    height: 500px;
    border: 2px solid red;
    background-image: radial-gradient(#e3748c, #a34e7b, #632a6a, #1b0c58);
}

还可以设置颜色不均匀分布

#img{
    width: 500px;
    height: 500px;
    border: 2px solid red;
    background-image: radial-gradient(#e3748c 30%, #a34e7b 5%, #632a6a 5%, #1b0c58);
}

背景图片

background的默认语法

/* 颜色 图片  图片位置  平铺方式 */
h1{
    background: red url("../img/a.png") 200px 10px no-repeat
}

默认效果就是平铺铺满，如果铺满还有多则直接重复

如图效果

<div id="img"></div>

/* 测试图片 https://image.alsritter.icu/2020/06/19/NuPrVJ.jpg */
#img{
    width: 1000px;
    height: 1000px;
    border: 2px solid red;
    background-image: url("https://image.alsritter.icu/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png");
}

设置平铺方式

值	说明
repeat	背景图像将向垂直和水平方向重复。这是默认
repeat-x	只有水平位置会重复背景图像
repeat-y	只有垂直位置会重复背景图像
no-repeat	background-image不会重复
inherit	指定background-repea属性设置应该从父元素继承

/* 水平平铺 */
#img{
    background-repeat: repeat-x;
}

更多样式参考

盒子模型

margin：外边距 border：边框 padding：内边距

圆角边框和阴影

圆角边框

/* 四个值时是顺时针 左上 右上 右下 左下 */
div{
  width: 100px;
  height: 100px;
  border: 10px solid red;
  border-radius: 50px 20px;
}
/* 如果为圆时直接就一个值就好了
   例如 border-radius: 50px;
 */

阴影

用法同上面的那个text-shadow一样

div{
  width: 100px;
  height: 100px;
  box-shadow: 10px 10px 15px rgba(153, 205, 50, 0.76);
}

display 和浮动

display

原本的标准文档流就是自上而下的排列，一个div块就是一行 行内元素和块级元素

常见块级元素：

div , h1---h6 , p , ul , ol , dl , table , form

常见行内元素：

span , a  ,strong  ,b ,em  , i  , big  ,small  ,label ,img , input  , select ,textarea

行内元素可以包含在块级元素中，反之则不行

<div>div块</div>
<span>span行内元素</span>

把行内元素转换成块，块转换成行内元素

/* 
block 块元素
inline 行内元素
inline-block 是块元素，但是保持行内元素的性质，可以多个块为一行
none 让这个标签消失
 */
div{
    border: 2px solid red;
    display: inline;
}

span{
    width: 100px;
    height: 100px;
    border: 2px solid red;
    display: block;
}

浮动

浮动的盒子可以向左浮动，也可以向右浮动，直到它的边缘碰到包含框或另一个浮动盒子为止

左浮动，就是让一些标签向左排列

div{
  float: left
}

清除浮动

/* 
clear: right; 右侧不允许有浮动元素
clear: left; 左侧不允许有浮动元素
clear: both; 两侧不允许有浮动元素
clear: none; 可以浮动
 */
div{
  float: left
  clear: both;
}

父级边框塌陷的问题

因为浮动起来之后会 脱离标准文档流，所以要解决父级边框塌陷的问题

两种常用的解决方法

1、在父级元素中添加一个 overflow: hidden;

#father{
  border: 1px #000 solid;
  overflow: hidden;
}

2、父类添加一个伪类：after（推荐）

#father:after {
  content: '';
  display: block;
  clear: both;
}

DOM 定位

相对定位

就是position: relative 相对于原来的位置，进行指定的偏移，相对定位的话，它还在标准文档流中，原来的位置会被保留

/* 相对定位（相对于原来的位置）：上下左右 
    top
    left
    bottom
    right
*/
#father>div:nth-of-type(1) {
    background-color: rgb(84, 109, 47);
    position: relative;
    top: -30px;
    left: 30px;
}

绝对定位

就是position: absolute;

没有父级元素定位的前提下，相对于浏览器定位
假设父级元素存在定位，通常会相对于父级元素进行偏移

#father {
    border: 1px solid red;
    position: relative;
}
/* 会移动到右边相对于父级元素10px的地方 */
#father>div:nth-of-type(2) {
    background-color: rgb(168, 166, 57);
    transform: translate(-50%, -50%);
    position: absolute;
    right: 10px;
}

固定定位

就是 position: fixed; 这个最好理解，就不细说了

z-index 和透明度

div{
  z-index: 10
}

就是图层，最低是 0 当产生覆盖关系时通过这个属性就能调节遮挡关系

0 - 1 默认是 1

/* 设置背景透明度 */
div{
  opacity: 0.5
}

多列布局 column

多列布局可以控制页面内容的排版方式，可以将文本内容设计成像报纸一样的多列布局。 | 属性 | 示例 | 含义 | | ------------ | ---------------------------- | ---------------------------------------- | | column-count | column-count: 3; | 将元素内部分割成3列 | | column-width | column-width: 100px; | 指定列的宽度为100像素 | | column-gap | column-gap: 40px; | 列与列间的间隙为 40 像素 | | column-rule | column-rule: 1px solid #000; | 指定列间隙样式，使用方法与边框一致 | | column-span | column-span: all; | 指定元素跨越多少列，all表示横跨所有列 | | columns | columns:120px 4; | 设置 column-width 和 column-count 的简写 |

<style>
  .newspaper {
    columns: auto 3;
    column-gap: 10px;
    column-rule: 1px solid #000;
  }
  h2 {
    column-span: all;
    text-align: center;
  }
</style>

<div class="newspaper">
  <h2>英国维斯米斯特教堂碑文</h2>
  当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，
  我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们
  的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，
  行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；
  在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。
</div>

弹性布局 flex

参考资料 MDN Flex 布局参考资料 CSS3多列布局 columns 弹性布局 flex

属性	值	含义
flex-direction	row / row-reverse / column / column-reverse	决定项目的排列方向
flex-wrap	nowrap / wrap / wrap-reverse	如果一条轴线排不下，如何换行
flex-flow	`<flex-direction>` `<flex-wrap>`	简写形式，默认值为row nowrap
justify-content	flex-start / flex-end / center / space-between / space-around	定义了项目在主轴上的对齐方式
align-items	flex-start / flex-end / center / baseline / stretch	定义项目在交叉轴上如何对齐
align-content	flex-start / flex-end / center / space-between / space-around / stretch	定义了多根轴线的对齐方式

Flex 是一维布局

如下使这些 DOM 为单列

.box {
  display: flex;
  /* 主方向竖向 */
  flex-direction: column;
  background-color: #c39de2;
}

<div class="box">
  <div>One </div>
  <div>Two </div>
  <div>Three
    <br/> has
    <br/> extra
    <br/> text
  </div>
</div>

flex-wrap 属性定义，如果一条轴线排不下，如何换行。

justify-content 属性定义了项目在主轴上的对齐方式。

align-content属性定义了多根轴线的对齐方式。

除了向上面那样整体调节，还可以单独调整项目的属性

属性	值	含义
order	`<integer>`	定义项目的排列顺序。数值越小，排列越靠前，默认为0
flex-grow	`<number>`	定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
flex-shrink	`<number>`	定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
flex-basis	`<length>`	定义了在分配多余空间之前，项目占据的主轴空间，默认为auto
flex	`<flex-grow> <flex-shrink> <flex-basis>`	是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto
align-self	auto / flex-start / flex-end / center / baseline / stretch	允许单个项目有与其他项目不一样的对齐方式

弹性布局居中

CSS 代码:
<style>        
    .box{            
        width: 300px;            
        height: 300px;           
        background-color: #ccc;            
        display: flex;            
        display: -webkit-flex;            
        justify-content: center;            
        align-items: center;        
    }        
    .box .a{            
        width: 100px;            
        height: 100px;            
        background-color: blue;        
    }    
</style>
HTML 代码：
<div class="box">        
    <div class="a"></div>    
</div>

网格布局 Grid

参考资料 MDN 网格布局参考资料 CSS Grid 网格布局教程（各种属性都介绍的很详细）

Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。

Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。

采用网格布局的区域，称为"容器"（container）。容器内部采用网格定位的子元素，称为"项目"（item）。

<div>
  <div><p>1</p></div>
  <div><p>2</p></div>
  <div><p>3</p></div>
</div>

上面代码中，最外层的 <div> 元素就是容器，内层的三个 <div> 元素就是项目。

容器属性：Grid 布局的属性分成两类。一类定义在容器上面，称为容器属性；另一类定义在项目上面，称为项目属性。

/* 指定为 Grid 布局 */
div {
  display: grid;
}

下面例子：

<div class="wrapper">
  <div class="one">One</div>
  <div class="two">Two</div>
  <div class="three">Three</div>
  <div class="four">Four</div>
  <div class="five">Five</div>
  <div class="six">Six</div>
</div>

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  grid-auto-rows: minmax(100px, auto);
}
.one {
  grid-column: 1 / 3;
  grid-row: 1;
}
.two { 
  grid-column: 2 / 4;
  grid-row: 1 / 3;
}
.three {
  grid-row: 2 / 5;
  grid-column: 1;
}
.four {
  grid-column: 3;
  grid-row: 3;
}
.five {
  grid-column: 2;
  grid-row: 4;
}
.six {
  grid-column: 3;
  grid-row: 4;
}

基本选择器（重要）​

标签选择器​

类选择器​

id选择器​

层次选择器​

后代选择器​

子选择器​

相邻兄弟选择器​

通用兄弟选择器​

结构伪类选择器​

属性选择器（重要）​

字体样式​

修改字体和大小​

修改字体粗细​

文本样式​

颜色和对齐方式​

首行缩进 行高​

装饰 decoration​

超链接标签修改​

文本阴影​

列表样式​

背景图片及渐变​

颜色渐变​

背景图片​

盒子模型​

圆角边框和阴影​

圆角边框​

阴影​

display 和 浮动​

display​

浮动​

父级边框塌陷的问题​

DOM 定位​

相对定位​

绝对定位​

固定定位​

z-index 和 透明度​

多列布局 column​

弹性布局 flex​

弹性布局居中​

网格布局 Grid​

References​